<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    var divObj ;
     //等待浏览器加载完整个文档后，再执行
      window.onload = function (){
        divObj = document.getElementById("imgDiv");
        //得到divObj对象中，所有img子标签数组
        var imgArray = divObj.getElementsByTagName("img");
        for(var i=0;i<imgArray.length;i++){
           imgArray[i].onclick = function (){
             changeFace(this);
           }
        }
      }

    function showDiv(){
      //得到imgDiv的对象，显示该 div
      divObj.style.display = "block";
    }

    function changeFace(clickImgObj){
      var imgObj = document.getElementById("faceImg");
      imgObj.src = clickImgObj.src;

      divObj.style.display = "none";
    }
  </script>
</head>
<body>
  <img src="photo/b1.jpg" id="faceImg"><br>
  <input type="button" value="选择头像" onclick="showDiv()"><br>
  <div id="imgDiv" style="display: none">
    <img src="photo/b1.jpg">
    <img src="photo/b2.jpg">
    <img src="photo/b3.jpg">
    <img src="photo/b4.jpg">
    <img src="photo/b5.jpg">
  </div>


</body>
</html>
